<template>

    <div class="container">

        <el-table :data="tableData" style="width: 100%; ">
        <el-table-column align="left" label="导航名称" prop="name" />
        <el-table-column align="right">

        <template #default="scope" >
            <el-button size="small" type="info" @click="handleEdit(scope.$index, scope.row)">重命名</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
        </el-table-column>
        </el-table>
    </div>


    <!-- 弹窗输入框 -->
    <InputDialog 
              title="重命名" 
              ref="inputDialogRef"
              @submitInput="rename">
    </InputDialog>



  </template>

<script setup>
import { sortDirFunction } from '@/assets/js/dirSort'
import { ref } from 'vue'
import InputDialog  from '../components/InputDialog.vue'
import { ElMessageBox, ElMessage } from 'element-plus';
import {useConfigStore} from "../stores/config";
const configStore = useConfigStore();

const choosedRow = ref(null)   // 当前选中的导航


// 加载表格数据
const tableData = ref([])
const loadNavList = async() => {
  let res = await window.api.getNavList()
  tableData.value = sortDirFunction.sortDir(res).map(item => ({ name: item }));
}
loadNavList()

// 显示dialog
const inputDialogRef = ref(null)
const handleEdit = (index, row) => {
    if (configStore.runningFlag) {
        ElMessage.error({ message: '请先停止服务' });
        return
    }
    choosedRow.value = row
    inputDialogRef.value.show = true
    inputDialogRef.value.inputValue = row.name
}

// 重命名
const rename = async (newNavName) => {
    if (choosedRow.value == null) {
        ElMessage.error({ message: '出现错误' });
        return
    }

    if (newNavName.trim()) {
        const res = await window.api.renameFile(choosedRow.value.name, newNavName.trim());
        if (!res.success) {
            ElMessage.error({ message: res.msg });
        } else {
            loadNavList();
            inputDialogRef.value.show = false;
            choosedRow.value = null;
        }
    }else{
            ElMessage.error({ message: '请输入导航名称' });
    }
}


// 删除导航
const handleDelete = async (index, row) => {
    if (configStore.runningFlag) {
        ElMessage.error({ message: '请先停止服务' });
        return
    }
    const confim = await ElMessageBox.confirm(
            `确定删除导航: <span style="color:fuchsia">${row.name}</span> 吗? 将会删除所有的文章,谨慎操作。`,
            'Warning',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                customClass: 'confirm-box-delete',
                dangerouslyUseHTMLString: true
            }
        );
    if (confim !== 'confirm') {
        return
    }

    const confimAgain = await ElMessageBox.confirm(
            `<span style="color: red">请再次确认，确认要删除导航: <span style="color:black">${row.name}</span> 吗？</span>`,
            'Warning',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                customClass: 'confirm-box-delete',
                dangerouslyUseHTMLString: true
            }
        );
    if (confimAgain !== 'confirm') {
        return
    }


    try {
        choosedRow.value = row;
        // 执行删除操作
        const res = await window.api.deleteNode(choosedRow.value.name);
        if (!res.success) {
            ElMessage.error({ message: res.msg });
        } else {
            loadNavList();
            choosedRow.value = null;
            ElMessage.success({ message: '删除成功', duration: 1000});
        }
    } catch (error) {
        // 异常处理，关闭 Loading 提示
        if (error !== 'cancel') {
            ElMessage.error('删除操作失败，请重试！');
        }
    }
};

</script>

<style scoped lang="scss">
.container{
    :deep(.el-table){
        --el-table-bg-color: rgba(0, 0, 0, 0);
        --el-table-row-hover-bg-color: #363635;
        --el-table-tr-bg-color: rgba(0, 0, 0, 0);
        --el-table-header-bg-color: #393938;
        --el-table-border-color: #4c4c4b;
        
    }
    :deep(.el-table__inner-wrapper){
        color: aliceblue;
    }


}
</style>